<template>
  <div>
    <el-row align="middle" class="pt-20">
      <el-col :span="16">
        <p class="main_title">抓取异常</p>
      </el-col>
    </el-row>
    <div style="display: flex; margin: 15px;0;15px;0">
      <div style="flex: 0 0 70%;padding-right: 5px;padding-left: 5px;" class="mb-4">
        <el-row class="search_block pt-20">
          <el-col :span="2" class="hori-cond"><label class="form-label">来源</label></el-col>
          <el-col :span="3">
            <el-select v-model="searchData.webid" placeholder="" @change="doList" clearable filterable>
              <el-option v-for="item in searchWebs" :key="item.webid" :label="item.webname" :value="item.webid">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1" class="hori-cond"></el-col>
          <el-col :span="5">
            <el-button icon="el-icon-search" @click="doList">刷新</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="table_container">
      <el-table :data="logs" :header-cell-style="boxheader" style="width: 100%">
        <el-table-column min-width="60px" align="center" label="赛事">
          <template slot-scope="scope">
            <span v-if="scope.row.raceid != ''"><a @click="goto('race', scope.row.webid, scope.row.raceid)"
                style="color: #409eff; cursor: pointer">{{ scope.row.raceid }}</a></span>
          </template>
        </el-table-column>
        <el-table-column prop="orgname" min-width="80px" align="center" label="主办方" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="url" min-width="180px" align="center" label="URL" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="message" min-width="50px" align="center" label="错误">
        </el-table-column>
        <el-table-column prop="starttime" min-width="50px" align="center" label="开始时间">
        </el-table-column>
        <el-table-column prop="endtime" min-width="50px" align="center" label="结束时间">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import webService from "@/service/webService";
import spiderLogsService from "@/service/spiderLogsService";

export default {
  name: "SpiderLogErrsList",
  data() {
    return {
      boxheader: {
        // background: '#eef1f6',
        color: "#606266",
        fontWeight: 800,
        borderBottom: "2px solid #EBEEF5",
      },
      searchData: {
        webid: 2,
        total: 0,
      },
      searchWebs: [
        {"webid":2, "webname":"安捷"},
        {"webid":13, "webname":"新科汇"}],
      logs: [],
    };
  },
  watch: {},
  mounted: function () {
    this.$store.dispatch("setActive", "12").then(() => {
      // this.$root.eventBus.$emit('exit')
    });
  },
  created() {
    if (this.$route.params && this.$route.params.webid) {
      this.searchData.webid = this.$route.params.webid;
    }
    this.doList()
  },
  destroyed() {},
  methods: {
    doList() {
      this.listSpiderLogErrs();
    },
    listSpiderLogErrs() {
      spiderLogsService.listSpiderLogErrs(this.searchData).then((res) => {
        if (res && res.data.result === 0) {
          this.logs = res.data.data;
          this.searchData.total = res.data.total;
        }
      });
    },
    goto(type, webid, raceid) {
      this.$router.push({
        name: `${type}Link`,
        params: { webid: webid, raceid: raceid },
      });
    },
  },
};
</script>
